import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_base/05_Gridview/listData.dart';

///
/// Gridview.extent
/// Gridview.count
/// Gridview.builder

void main() {
  runApp(const MaterialApp(
    title: 'Gridview',
    // theme: ThemeData.light,
    home: Mygridview2(),
  ));
}

class Mygridview extends StatefulWidget {
  const Mygridview({super.key});

  @override
  State<Mygridview> createState() => _MygridviewState();
}

class _MygridviewState extends State<Mygridview> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Gridview'),
      ),
      body: GridView.count(
        padding: const EdgeInsets.all(10), // gridview与父容器的间距宽度
        crossAxisCount: 3,
        crossAxisSpacing: 5, // 水平间距
        mainAxisSpacing: 5,
        children: _initData(),
      ),
    );
  }

  List<Widget> _initData() {
    List<Widget> list = [];
    for (var i = 0; i < listData.length; i++) {
      list.add(Container(
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(color: Colors.black54, width: 2),
        ),
        child: const Text('这是文本'),
      ));
    }
    return list;
  }
}

/// gridview.extent
/// 与上面gridview.count的主要不同就是他们的必要参数是不同的，extent必选参数是最大的横向的大小

class Mygridview3 extends StatefulWidget {
  const Mygridview3({super.key});

  @override
  State<Mygridview3> createState() => _Mygridview3State();
}

class _Mygridview3State extends State<Mygridview3> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Gridview'),
      ),
      body: GridView.extent(
        padding: EdgeInsets.all(10),
        crossAxisSpacing: 5,
        mainAxisSpacing: 5,
        maxCrossAxisExtent: 150,

        ///
        children: _initData(),
      ),
    );
  }

  List<Widget> _initData() {
    List<Widget> list = [];
    for (var i = 0; i < listData.length; i++) {
      list.add(Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          border: Border.all(color: Colors.black54, width: 2),
        ),
        child: const Text('这是文本'),
      ));
    }
    return list;
  }
}

/// gridview.builder
///

class Mygridview2 extends StatefulWidget {
  const Mygridview2({super.key});

  @override
  State<Mygridview2> createState() => _Mygridview2State();
}

class _Mygridview2State extends State<Mygridview2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Gridview'),
      ),
      body: GridView.builder(
          padding: const EdgeInsets.all(10),
          itemCount: listData.length,
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 150,
            crossAxisSpacing: 5,
            mainAxisSpacing: 5,
          ),
          itemBuilder: (context, index) {
            return _initData(context, index);
          }),
    );
  }

  Widget _initData(BuildContext ctx, int index) {
    return Container(
      decoration: BoxDecoration(
          // color: Colors.blue,
          border: Border.all(color: Colors.black54, width: 2)),
      child: Column(
        children: [
          Image.network(listData[index]['imageUrl']),
          const SizedBox(
            height: 5,
          ),
          Text('${listData[index]['title']}')
        ],
      ),
    );
  }
}
